<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>扩展运算符</title>
</head>
<body>
  <script>
    /**
     * 1. 数组扩展
     * 2. 数组深拷贝
     * 3. 对象扩展
     * 4. 对象深拷贝
    */

    // 1. 数组扩展
    const arr1 = [1, 2, 3];
    const arr2 = [5, 6, 7];
    const arr = [...arr1, 'and', ...arr2];
    console.log('arr扩展', arr);

    // 2. 数组深拷贝
    // const tempArr = arr; // 指针为同一引用
    // arr[0] = 'one';
    // console.log('arr', arr);
    // console.log('tempArr', tempArr);

    // 解决方案--concat
    // const arrConcatDeep = [].concat(arr);
    // arr[0] = 'one';
    // console.log('arr', arr);
    // console.log('arrConcatDeep', arrConcatDeep);

    // 解决方案--扩展运算符
    const arrExtendDeep = [...arr];
    arr[0] = 'one';
    console.log('arr', arr);
    console.log('arrExtendDeep', arrExtendDeep);

    // 3. 对象扩展
    const obj1 = { a: 1 };
    const obj2 = { b: 2 };
    console.log('objExtend', { ...obj1, ...obj2 });

    // 4. 对象深拷贝
    // const obj = obj1; // 指针为同一引用
    // obj1.d = 'd';
    // console.log('obj1', obj1);
    // console.log('obj', obj);

    // 解决方案--Object.assign()
    // const obj = Object.assign({}, obj1);
    // obj1.d = 'd';
    // console.log('obj1', obj1);
    // console.log('obj', obj);

    // 解决方案--扩展运算符
    const obj = { ...obj1 };
    obj1.d = 'd';
    console.log('obj1', obj1);
    console.log('obj', obj);
  </script>
</body>
</html>